import { url } from 'inspector';
import { Component, Input, OnInit } from '@angular/core';
import { ModalController, NavParams } from '@ionic/angular';
declare var $: any;
@Component({
  selector: 'app-cropper',
  templateUrl: './cropper.component.html',
  styleUrls: ['./cropper.component.scss'],
})
export class CropperComponent implements OnInit {
  @Input() data: any;
  cropUrl: any;
  cropper: any;
  constructor(
    public modalController: ModalController,
  ) { }

  ngOnInit() {
    if ( (this.data && !this.data.cropperRatio )) {
      this.data.cropperRatio  = 2.54; // w/h
    }
    const image = $('#image');
    image.attr('src', this.data.url);
    image.cropper({
        aspectRatio: this.data.cropperRatio,
        preview: '.img-preview',
        cropBoxResizable: false,
        cropBoxMovable: false,
        viewMode: 1,
        dragMode: 'move'
    });

    // Get the Cropper.js instance after initialized
    this.cropper = image.data('cropper');

    // Cropper
    const that = this;
    image.on({
      cropend: function (e) {
        
      },
      zoom: function (e) {
        
      },
      cropmove: function (e) {
        
      },

    });
  }

  // getPreview() {

  //   const  canvas: HTMLCanvasElement = this.cropper.getCroppedCanvas(
  //     {
  //       minWidth: 256,
  //       minHeight: 256,
  //       maxWidth: 4096,
  //       maxHeight: 4096,
  //       fillColor: '#fff',
  //       imageSmoothingEnabled: false,
  //       imageSmoothingQuality: 'high',
  //     }) as HTMLCanvasElement;
  //   // this.cropUrl =  canvas.toDataURL();// base64
  //   canvas.toBlob((blob) => {
  //      this.cropUrl = blob;
  //   });
  // }

  sureClick() {
    const  canvas: HTMLCanvasElement = this.cropper.getCroppedCanvas(
      {
        minWidth: 128,
        minHeight: 128,
        maxWidth: 1024,
        maxHeight: 1024,
        fillColor: '#fff',
        imageSmoothingEnabled: false,
        imageSmoothingQuality: 'high',
      }) as HTMLCanvasElement;
    // this.cropUrl =  canvas.toDataURL();// base64
    canvas.toBlob((blob) => {
       this.cropUrl = blob;
       this.modalController.dismiss(this.cropUrl);
    });
    
  }
  dismissClick() {
    this.modalController.dismiss();
  }
}
